<template>
  <el-dialog
    :close-on-click-modal="false"
    v-model="visibleDialog"
    :title="props.title"
    width="1500px"
    draggable
    @close="closeDialog"
  >
    <h4 class="mb-[20px] mt-[0px]">基本数据</h4>
    <el-form ref="formRef" :model="formData" :rules="rules" label-width="120px">
      <div class="search-container">
        <el-row>
          <el-col :span="6">
            <el-form-item label="呼叫编号" prop="callCode">
              <span>{{ formData.callCode }}</span>
            </el-form-item>
          </el-col>
          <!--          <el-col :span="6">-->
          <!--            <el-form-item label="公司编号" prop="organizationCode">-->
          <!--              <span>{{ formData.organizationCode }}</span>-->
          <!--            </el-form-item>-->
          <!--          </el-col>-->
          <!--          <el-col :span="6">-->
          <!--            <el-form-item label="工厂编号" prop="plantCode">-->
          <!--              <span>{{ formData.plantCode }}</span>-->
          <!--            </el-form-item>-->
          <!--          </el-col>-->
          <!--          <el-col :span="6">-->
          <!--            <el-form-item label="呼叫类型编码" prop="callTypeCode">-->
          <!--              <span>{{ formData.callTypeCode }}</span>-->
          <!--            </el-form-item>-->
          <!--          </el-col>-->
          <!--          <el-col :span="6">-->
          <!--            <el-form-item label="班组编号" prop="crewCode">-->
          <!--              <span>{{ formData.crewCode }}</span>-->
          <!--            </el-form-item>-->
          <!--          </el-col>-->
          <!--          <el-col :span="6">-->
          <!--            <el-form-item label="呼叫设定编号" prop="callSettingCode">-->
          <!--              <span>{{ formData.callSettingCode }}</span>-->
          <!--            </el-form-item>-->
          <!--          </el-col>-->
          <el-col :span="6">
            <el-form-item label="工作中心编号" prop="workCenterCode">
              <span>{{
                formData.workCenterCode + "-" + formData.workCenterName
              }}</span>
            </el-form-item>
          </el-col>
          <!--          <el-col :span="6">-->
          <!--            <el-form-item label="设备编号" prop="equipmentCode">-->
          <!--              <span>{{ formData.equipmentCode }}</span>-->
          <!--            </el-form-item>-->
          <!--          </el-col>-->
          <el-col :span="6">
            <el-form-item label="是否停机" prop="isStop">
              <span v-if="formData.isStop === 1">是</span>
              <span v-else>否</span>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="呼叫类型" prop="callTypeName">
              <span>{{ formData.callTypeName }}</span>
            </el-form-item>
          </el-col>
          <!--          <el-col :span="6">-->
          <!--            <el-form-item label="停机类型编码" prop="stopCode">-->
          <!--              <span>{{ formData.stopCode }}</span>-->
          <!--            </el-form-item>-->
          <!--          </el-col>-->
          <!--          <el-col :span="6">-->
          <!--            <el-form-item label="停机原因编号" prop="stopReasonCode">-->
          <!--              <span>{{ formData.stopReasonCode }}</span>-->
          <!--            </el-form-item>-->
          <!--          </el-col>-->
          <el-col :span="6">
            <el-form-item label="呼叫时间" prop="callTime">
              <span>{{ formData.callTime }}</span>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="响应时间" prop="answerTime">
              <span>{{ formData.answerTime }}</span>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="到场时间" prop="arriveTime">
              <span>{{ formData.arriveTime }}</span>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="维修完成时间" prop="repairFinishTime">
              <span>{{ formData.repairFinishTime }}</span>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="解决时间" prop="issueTime">
              <span>{{ formData.issueTime }}</span>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="呼叫状态" prop="callState">
              <span> {{ useDictionary("CallState", formData.callState) }}</span>
            </el-form-item>
          </el-col>
          <!--          <el-col :span="6">-->
          <!--            <el-form-item label="处理时长" prop="totalTime">-->
          <!--              <span>{{ formData.totalTime }}</span>-->
          <!--            </el-form-item>-->
          <!--          </el-col>-->
          <el-col :span="6">
            <el-form-item label="处理人" prop="processorName">
              <span>{{ formData.processorName }}</span>
            </el-form-item>
          </el-col>
          <!--          <el-col :span="6">-->
          <!--            <el-form-item label="报检类型编码" prop="inspectionTypeCode">-->
          <!--              <span>{{ formData.inspectionTypeCode }}</span>-->
          <!--            </el-form-item>-->
          <!--          </el-col>-->
          <!--          <el-col :span="6">-->
          <!--            <el-form-item label="工序编号" prop="processCode">-->
          <!--              <span>{{ formData.processCode }}</span>-->
          <!--            </el-form-item>-->
          <!--          </el-col>-->

          <el-col :span="6">
            <el-form-item label="工序" prop="processName">
              <span>{{ formData.processName }}</span>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="设备" prop="equipmentName">
              <span>{{ formData.equipmentName }}</span>
            </el-form-item>
          </el-col>
          <el-col :span="6" v-if="formData.stopName">
            <el-form-item label="停机类型" prop="stopName">
              <span>{{ formData.stopName }}</span>
            </el-form-item>
          </el-col>
          <el-col :span="6" v-if="formData.stopReasonName">
            <el-form-item label="停机原因" prop="stopReasonName">
              <span>{{ formData.stopReasonName }}</span>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="是否触发报检" prop="autoInspection">
              <span v-if="formData.autoInspection === 1">是</span>
              <span v-else>否</span>
            </el-form-item>
          </el-col>
          <el-col :span="6" v-if="formData.inspectionTypeName">
            <el-form-item label="报检类型" prop="inspectionTypeName">
              <span>{{ formData.inspectionTypeName }}</span>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="当前升级编号" prop="callSequence">
              <span>{{ formData.callSequence }}</span>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="到达当前升级编号" prop="arriveCallSequence">
              <span>{{ formData.arriveCallSequence }}</span>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="维修当前升级编号" prop="repairCallSequence">
              <span>{{ formData.repairCallSequence }}</span>
            </el-form-item>
          </el-col>
          <!--          <el-col :span="6">-->
          <!--            <el-form-item label="是否启用" prop="enabled">-->
          <!--              <span v-if="formData.enabled === 1">是</span>-->
          <!--              <span v-else>否</span>-->
          <!--            </el-form-item>-->
          <!--          </el-col>-->
          <!--          <el-col :span="6">-->
          <!--            <el-form-item label="备注" prop="remarks">-->
          <!--              <span>{{ formData.remarks }}</span>-->
          <!--            </el-form-item>-->
          <!--          </el-col>-->
          <el-col :span="6">
            <el-form-item label="创建时间" prop="createTime">
              <span>{{ formData.createTime }}</span>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="创建人" prop="createdUserName">
              <span>{{ formData.createdUserName }}</span>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="更新时间" prop="lastUpdateTime">
              <span>{{ formData.lastUpdateTime }}</span>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="更新人" prop="lastUpdatedUserName">
              <span>{{ formData.lastUpdatedUserName }}</span>
            </el-form-item>
          </el-col>
        </el-row>
      </div>
    </el-form>
    <h4 class="mb-[20px] mt-[20px]">详细数据</h4>
    <!-- <el-card shadow="never" class="table-container"> -->
    <div class="app-container">
      <el-card shadow="never" class="table-container">
        <el-table
          ref="dataTableRef"
          v-loading="loading"
          :data="tableData"
          highlight-current-row
          border
          style="max-height: 250px; overflow: auto"
        >
          <el-table-column
            label="呼叫人类别"
            prop="callMemberType"
            min-width="150"
            show-overflow-tooltip
            align="center"
          >
            <template #default="scope">
              <el-tag type="success" v-if="scope.row.callMemberType == 1"
                >抄送人
              </el-tag>
              <el-tag type="info" v-else>被呼叫人</el-tag>
            </template>
            <!-- <template #default="scope">
              {{ useDictionary("CallMemberType", scope.row.callMemberType) }}
            </template> -->
          </el-table-column>
          <el-table-column
            label="推送时间"
            prop="createTime"
            min-width="150"
            show-overflow-tooltip
            align="center"
          />
          <el-table-column
            label="呼叫顺序号"
            prop="callSequence"
            min-width="120"
            show-overflow-tooltip
            align="center"
          />
          <el-table-column
            label="说明"
            prop="content"
            min-width="120"
            show-overflow-tooltip
            align="center"
          />
          <el-table-column
            label="呼叫方式"
            prop="callType"
            min-width="120"
            show-overflow-tooltip
            align="center"
          >
            <template #default="scope">
              {{ useDictionary("AndCallType", scope.row.callType) }}
            </template>
          </el-table-column>
          <!--          <el-table-column-->
          <!--            label="呼叫次数"-->
          <!--            prop="repeatCount"-->
          <!--            min-width="120"-->
          <!--            show-overflow-tooltip-->
          <!--            align="center"-->
          <!--          />-->
          <el-table-column
            label="班组编号"
            prop="crewCode"
            min-width="120"
            show-overflow-tooltip
            align="center"
          />
          <el-table-column
            label="成员角色名称"
            prop="memberRoleName"
            min-width="120"
            show-overflow-tooltip
            align="center"
          />
          <el-table-column
            label="呼叫人"
            prop="callMemberName"
            min-width="100"
            show-overflow-tooltip
            align="center"
          />
          <!--          <el-table-column-->
          <!--            label="备注"-->
          <!--            prop="remarks"-->
          <!--            min-width="180"-->
          <!--            show-overflow-tooltip-->
          <!--            align="center"-->
          <!--          />-->
          <!--          <el-table-column-->
          <!--            label="创建时间"-->
          <!--            prop="createTime"-->
          <!--            min-width="180"-->
          <!--            show-overflow-tooltip-->
          <!--            align="center"-->
          <!--          />-->
          <!--          <el-table-column-->
          <!--            label="创建人名"-->
          <!--            prop="createdUserName"-->
          <!--            min-width="150"-->
          <!--            show-overflow-tooltip-->
          <!--            align="center"-->
          <!--          />-->
          <!--          <el-table-column-->
          <!--            label="启用状态"-->
          <!--            prop="enabled"-->
          <!--            min-width="100"-->
          <!--            show-overflow-tooltip-->
          <!--            align="center"-->
          <!--          >-->
          <!--            <template #default="scope">-->
          <!--              <el-tag type="success" v-if="scope.row.enabled === 1"-->
          <!--                >启用</el-tag-->
          <!--              >-->
          <!--              <el-tag type="info" v-else>停用</el-tag>-->
          <!--            </template>-->
          <!--          </el-table-column>-->
        </el-table>
      </el-card>

      <checkschemeitem-edit
        :visible="addDialog.visible"
        :title="addDialog.title"
        :data="addDialog.data"
        @reset-table="(id:string) => (id?.length ? getInfoList() : getInfoList())"
        :is-readonly="addDialog.readvisible"
        @change-visible="changeVisible"
      />
    </div>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="closeDialog">关 闭</el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script setup lang="ts">
import { useTable, useDictionary } from "@/utils/useTable";
import request from "@/utils/request";

let tableData = ref([]);
let formData = reactive({
  id: "",
  callCode: "",
  organizationId: "",
  organizationCode: "",
  plantId: "",
  plantCode: "",
  callTypeId: "",
  callTypeCode: "",
  crewId: "",
  crewCode: "",
  callSettingId: "",
  callSettingCode: "",
  workCenterId: "",
  workCenterCode: "",
  equipmentId: "",
  equipmentCode: "",
  isStop: 0,
  stopId: "",
  stopCode: "",
  stopReasonId: "",
  stopReasonCode: "",
  callTime: "",
  answerTime: "",
  arriveTime: "",
  issueTime: "",
  callState: "",
  totalTime: "",
  processorId: "",
  processorName: "",
  autoInspection: 0,
  inspectionTypeId: "",
  inspectionTypeCode: "",
  version: "",
  remarks: "",
  createTime: "",
  createdUserId: "",
  createdUserName: "",
  lastUpdateTime: "",
  lastUpdatedUserId: "",
  lastUpdatedUserName: "",
  enabled: 0,
  deleted: "",
  processId: "",
  processCode: "",
  repairFinishTime: "",
  workCenterName: "",
  processName: "",
  callTypeName: "",
  stopReasonName: "",
  inspectionTypeName: "",
  stopName: "",
  equipmentName: "",
  callSequence: "",
  arriveCallSequence: "",
  repairCallSequence: "",
});
const emit = defineEmits(["reset-table", "change-visible"]);
const props = defineProps({
  visible: {
    type: Boolean,
    default: () => {
      return false;
    },
  },
  title: {
    type: String,
    default: () => {
      return "";
    },
  },
  data: {
    type: Object,
    default: () => {
      return {};
    },
  },
  isReadonly: {
    type: Boolean,
    default: () => {
      return false;
    },
  },
});

watch(
  () => props.data,
  (newVal: any) => {
    const { id } = newVal;
    Object.assign(formData, props.data);
    getInfoList();
  }
);
watch(
  () => props.visible,
  (newVal: boolean) => {
    visibleDialog.value = newVal;
  }
);
defineOptions({
  name: "MDMCHECKSCHEMEITEM",
  inheritAttrs: false,
});

// 请求参数
const requestApi = "/mdm/checkschemeitem/queryByPage";

// 是否需要分页
const pagination = true;

const initParam = {};
const visibleDialog = ref(false);
// 初始化搜索参数数据
const searchParamInit = {};

const deleteParam = {
  api: "/mdm/checkschemeitem/delete",
  data: {},
};

const dataCallBack = ref(undefined); // 无需二次数据处理&不传赞数也行

// 表格操作 Hooks
const {
  pageable,
  ids,
  handleSizeChange,
  handleCurrentChange,
  handleSelectionChange,
  loading,
}: any = useTable(
  initParam,
  searchParamInit,
  pagination,
  dataCallBack.value,
  deleteParam
);

const addDialog = reactive<DialogOption>({
  visible: false,
  readvisible: false,
  title: "",
  data: {},
});

async function getInfoList() {
  if (formData.id === undefined || formData.id === null || formData.id === "")
    return;
  const { data } = await request({
    url: "/andon/andcallrecord/getlist/" + formData.id,
    method: "get",
  });
  tableData.value = data;
  console.log("addDialog.data", tableData);
}

/** 关闭表单弹窗 */
function closeDialog() {
  console.log("closeDialog");
  visibleDialog.value = false;
  emit("change-visible", false);
}

function changeVisible(value: boolean) {
  addDialog.visible = value;
  if (!value) {
    addDialog.data = {};
  }
}
</script>
